<template>
  <div class="view">
    <ConditionFilter ref="Filter" @openFilter="openFilter" @confirm="search" />
    <div class="action">
      <u-divider></u-divider>
      <u-button class="create" iconColor="#fff" @click="download">
        <image src="@/static/icon/upload.png" />
        导出列表
      </u-button>
    </div>
    <scroll-view :scroll-top="scrolltTop" scroll-y="true" style="height: calc(100vh - 186rpx)" @scrolltolower="getMore">
      <div class="list" v-if="list.data.length > 0">
        <u-divider></u-divider>
        <div>
          <div v-for="(item, index) in list.data">
            <div class="item">
              <div class="index">{{ index + 1 }}</div>
              <div class="left">
                <XPicture class="avatar" defaultImgName="avatar" :url="item.head_img" />
                
                <div class="info">
                  <div class="nickname">{{ item.nickname }}</div>
                  <div class="status tag" :class="getStatus(item.status)?.class">{{ getStatus(item.status)?.text }}</div>

                  <!-- <div class="tag" :class="">{{item.status}}</div> -->
                </div>
              </div>
              <div class="right">
                <div class="time">{{ item.time }}</div>
                <div class="detail" @click="showDetail(item)">报名信息>></div>
              </div>
            </div>
            <u-divider></u-divider>
          </div>
          <u-loadmore v-if="list.data.length > 4" :status="list.last_page >= list.page ? 'loading' : 'nomore'" />
        </div>
      </div>
      <div v-else>
        <XNothing />
      </div>
    </scroll-view>
  </div>
  <detailDrawer ref="Popup" />
</template>

<script setup>
import { ref, reactive } from "vue"
import detailDrawer from "./detailDrawer.vue"
import { onLoad } from "@dcloudio/uni-app"
import { request, catchException } from "@/util/request"
import store from "@/store/store"
import { navigate } from "@/util/navigate"
import { baseUrl } from "@/config/config"
const { statusState, programState } = store
const id = ref()
onLoad((opt) => {
  list.query.act_id = opt.id
  id.value = opt.id
  getList()
})
function download() {
  if (programState.browser.wx) {
    navigate({
      url: "/pages/download/index",
      query: {
        type: "apply",
        id: list.query.act_id,
      },
    })
  } else {
    const userToken_zh_web = uni.getStorageSync("userToken_zh_web")
    const url =
      baseUrl +
      `adminMobile/activityApplyExport/activityApplyList?act_id=${list.query.act_id}&token=${userToken_zh_web.token}`
    window.open(url)
  }
}

function getStatus(status) {
  return statusState.activityStatus.apply_status[status] || {class:'',text:'待审核'}
}

// admin/activityApply/activityApplyList
// 列表相关变量定义
const list = reactive({
  data: [],
  query: {},
  last_page: 10,
  page: 1,
  limit: 10,
  typeFilterList: [],
})
// 搜索
function search(val) {
  list.page = 1
  list.query = val
  getList()
}
// 下一页
function getMore() {
  list.page += 1
  getList()
}
// 获取列表
function getList() {
  if (list.page > list.last_page) {
    return
  }
  request({
    url: "adminMobile/activityApply/activityApplyList",
    method: "get",
    data: { page: list.page, limit: 10, ...list.query, act_id: id.value },
  })
    .then((res) => {
      console.log("res", res)
      if (list.page == 1) {
        list.data = res.content.data
        list.last_page = res.content.last_page
      } else {
        list.data = list.data.concat(res.content.data)
      }
    })
    .catch((e) => {
      if (list.page == 1) {
        list.data = []
      }
      catchException(e)
    })
}

const Filter = ref()
function openFilter() {
  Filter.value.open({
    top: 85,
    filterList: [
      {
        type: "radio",
        label: "状态筛选",
        param: "status",
        options: [
          { label: "已通过", value: 1 },
          { label: "已拒绝", value: 3 },
          { label: "审核中", value: 4 },
        ],
      },
    ],
  })
}

const Popup = ref(null)
function showDetail(item) {
  item.showAction = true
  Popup.value.open(item)
}
</script>

<style lang="scss" scoped>
.action {
  margin-bottom: 10rpx;
  .u-divider {
    margin: 10rpx 0;
  }
  .create {
    width: 200rpx;
    height: 64rpx;
    background: #468eff;
    border-radius: 16rpx;
    margin-left: 30rpx !important;
    margin-top: 10rpx !important;
    font-size: 28rpx;
    font-family: PingFang SC, PingFang SC-Regular;
    font-weight: 400;
    text-align: center;
    color: #ffffff;
    image {
      width: 40rpx;
      height: 40rpx;
    }
  }
}
.list {
  margin-top: -10rpx;
  display: flex;
  flex-direction: column;
  .u-divider {
    margin: 10rpx 0;
  }
  .item {
    position: relative;
    padding: 10rpx 30rpx 10rpx 60rpx;
    display: flex;
    justify-content: space-between;
    .index {
      position: absolute;
      left: 0;
      top: -10rpx;
      width: 48rpx;
      height: 48rpx;
      background: #f3f3f3;
      border-radius: 0px 0px 48rpx 0px;
      font-size: 24rpx;
      font-family: PingFang SC, PingFang SC-Regular;
      font-weight: 400;
      text-align: center;
      color: #666666;
    }
    .left {
      display: flex;
      gap: 20rpx;
      .info {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .nickname {
          font-size: 28rpx;
          font-family: PingFang SC, PingFang SC-Bold;
          font-weight: 700;
          color: #333333;
        }
        .tag {
          padding: 0 12rpx;
          height: 32rpx;
          border-radius: 4rpx;

          font-size: 20rpx;
          font-family: PingFang SC, PingFang SC-Regular;
          font-weight: 400;
          text-align: center;
        }
      }
      .avatar {
        width: 80rpx;
        height: 80rpx;
        background: #ecf3ff;
        border-radius: 50%;
      }
    }
    .right {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .time {
        font-size: 24rpx;
        font-family: PingFang SC, PingFang SC-Regular;
        text-align: left;
        color: #bbbbbb;
      }
      .detail {
        font-size: 24rpx;
        font-family: Source Han Sans CN, Source Han Sans CN-Regular;
        font-weight: 400;
        text-decoration: underline;
        color: #468eff;
        text-align: right;
      }
    }
  }
}
</style>
